<template>
    <div id="container">
        <el-button type="primary" round style="margin:20px;" @click="exportExcelSelect">导出Excel</el-button>
        <el-table
                @selection-change="handleSelectionChange"
                :data="tableData"
                stripe
                style="width: 100%">

            <el-table-column
                    type="selection">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="id"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="学号"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="realName"
                    label="姓名"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="telephoneNumber"
                    label="手机号码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="identityNumber"
                    label="身份证号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="role"
                    label="角色"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="isForbidden"
                    label="账号状态"
                    width="180">
            </el-table-column>
            <el-table-column
                    label="操作" width="124">
                <template slot-scope="scope">
                    <el-button type="danger" round @click="forbidden(scope.row.id)">禁用账号</el-button>
                </template>
            </el-table-column>
            <el-table-column label="">
                <template slot-scope="scope">
                    <el-button type="primary" round @click="save(scope.row.id)">解禁账号</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="表格保存预览" width="70%" :visible.sync="selectWindow">
            <el-table :data="selectData" id="selectTable" height="380px">
                <el-table-column
                        prop="id"
                        label="id"
                >
                </el-table-column>
                <el-table-column
                        prop="username"
                        label="学号"
                >
                </el-table-column>
                <el-table-column
                        prop="realName"
                        label="姓名"
                >
                </el-table-column>
                <el-table-column
                        prop="telephoneNumber"
                        label="手机号码"
                >
                </el-table-column>
                <el-table-column
                        prop="identityNumber"
                        label="身份证号"
                >
                </el-table-column>
                <el-table-column
                        prop="role"
                        label="角色"
                >
                </el-table-column>
                <el-table-column
                        prop="isForbidden"
                        label="账号状态"
                >
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="exportExcel">确定保存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import htmlToExcel from '@/utils/htmlToExcel'
export default {
    name: "AccountManage",
    mounted() {
        this.init();
    },
    data(){
        return {
            tableData: [],
            selectData:[],
            selectWindow:false
        }
    },
    methods:{
        init(){
            var vm = this;
            this.axios({
                url: '/myapi/user/allUsers',
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200){
                    vm.tableData = response.data.data.userList;
                }
            });
        },
        forbidden(id){
            console.log(id);
            var vm = this;
            this.axios({
                url: '/myapi/user/forbidden/'+id,
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200){
                    vm.init();
                    vm.$message({
                        duration:600,
                        message: '禁用成功!',
                        type: 'success'
                    });
                }
                else if(response.data.message==="无法禁用管理员账号"){
                    vm.$message.error('无法禁用管理员账号!');
                }
                else if(response.data.message==="该账号已被禁用"){
                    vm.$message.error('该账号已被禁用!');
                }
            });
        },
        save(id){
            console.log(id);
            var vm = this;
            this.axios({
                url: '/myapi/user/save/'+id,
                method: 'get'
            }).then(function (response) {
                if(response.data.code===200){
                    vm.init();
                    vm.$message({
                        duration:600,
                        message: '账号解禁成功!',
                        type: 'success'
                    });
                }
                else if(response.data.message==="账号状态正常"){
                    vm.$message('该账号状态正常!');
                }
                else if(response.data.message==="用户不存在"){
                    vm.$message.error('用户不存在!');
                }
            });
        },
        exportExcel() {
            htmlToExcel.getExcel('#selectTable','导出的自定义标题')
        },
        exportExcelSelect(){
            if (this.selectData.length < 1){
                this.$message.error('请选择要导出的内容！');
                return false;
            }
            this.selectWindow = true;
        },
        handleSelectionChange(val) {
            this.selectData = val;
        }
    }
}
</script>

<style scoped>
    #btnDisplay{
        display: flex;
    }
</style>
